<template>
  <div class="withdraw-currency_mod" :class="themeClass">
    <v-loading v-if="loading" />

    <v-nav :title="currency + $t('WithdrawCurrency.withdraw')" v-if="isDayTime === false" title_color="#fff" :class="themeClass"></v-nav>
    <v-nav :title="currency + $t('WithdrawCurrency.withdraw')" v-if="isDayTime === true"></v-nav>
    <div class="withdraw-currency_mod_box">
      <div class="withdraw-currency_mod_box_currency-content">
        <div class="withdraw-currency_mod_box_currency-content-form">
          <p>{{ $t('WithdrawCurrency.Withdrawal address') }}</p>
          <van-field style="height: auto" v-model="currencyAddress" readonly rows="1" type="textarea" autosize :placeholder="$t('WithdrawCurrency.Please select the withdrawal address')" @click="showPickers" />
        </div>

        <div class="select">
          <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar :columns="addressList" @confirm="onConfirm" @cancel="showPicker = false" :confirm-button-text="$t('info.info10')" :cancel-button-text="$t('info.info11')" />
          </van-popup>
        </div>

        <div class="withdraw-currency_mod_box_currency-content-form">
          <p>{{ $t('WithdrawCurrency.Amount of coins withdrawn') }}</p>
          <van-field v-model="form.amount" @input="handlePrice(form.amount)" type="number" maxlength="20" :placeholder="$t('WithdrawCurrency.Minimum withdrawal amount') + currencyDetail.commission_min + ', ' + $t('WithdrawCurrency.Maximum withdrawal amount') + currencyDetail.commission_max" />
          <div class="desc">
            <span>{{ $t('WithdrawCurrency.Available') }}:</span>
            <span :class="bgColor">{{ userBalance }} {{ currency }}</span>
          </div>
        </div>

        <div class="withdraw-currency_mod_box_currency-content-form">
          <p>{{ $t('WithdrawCurrency.Secret password') }}</p>
          <van-field v-model="form.password" type="password" :placeholder="$t('WithdrawCurrency.Please enter the security password')" />
        </div>

        <div class="withdraw-currency_mod_box_currency-content-form">
          <p>{{ $t('WithdrawCurrency.handling fee') }}</p>
          <van-field :v-model="commission" readonly :placeholder="commission" />
        </div>
      </div>
    </div>

    <div class="moomoo-bottom" style="height: 108px">
      <div class="moomoo-bottom-submit" :class="themeClass">
        <div>
          <span style="color: #1a1a1a" :class="bgColor">{{ $t('WithdrawCurrency.Estimated arrival quantity') }}:</span>
          <span style="color: #ee3e57; font-weight: 500" :class="bgColor">{{ estimateArrival }}</span>
        </div>
        <van-button round block color="#DAAB51" @click="submit">{{ $t('WithdrawCurrency.confirm submission') }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressList: [], //提币地址列表
      showPicker: false, //是否显示提币地址
      currency: '', //币种名称
      currencyAddress: '', //提币地址
      currencyDetail: {
        commission_min: '0.01',
        commission_max: '1.00'
      }, //提现方式的详情
      form: { withdraw_id: '', wall_id: '', amount: '', password: '' },
      userBalance: '0.00', //币种余额
      isDayTime: false,
      bankDetail: {},
      loading: false,
      commissions: 0, //手续费
      currencyReceipt: 0 // 到账币数量
    }
  },
  computed: {
    estimateArrival() {
      var estimateArrival = '0.00000000'
      if ((+this.form.amount - +this.commissions).toFixed(8) > 0) {
        estimateArrival = (+this.form.amount - +this.commissions).toFixed(8)
      }
      this.currencyReceipt = estimateArrival
      return estimateArrival + ' ' + this.currency
    },
    commission() {
      if (this.currencyDetail.commission_type == 1) {
        var commission = this.currencyDetail.commission
      } else if (this.currencyDetail.commission_type == 0) {
        var commission = (this.form.amount * (this.currencyDetail.commission / 100)).toFixed(8)
      }
      this.commissions = commission
      return commission
    },
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  activated() {
    this.form.withdraw_id = this.$route.query.detail
    this.getWithdrawDetail()
  },
  methods: {
    // 显示提币地址
    showPickers() {
      if (this.addressList.length == 0 && !this.loading) {
        this.$router.push({
          path: '/asset/walletaddress?currency=' + this.currency
        })
        return
      }
      this.showPicker = true
    },
    // 选择提币地址
    onConfirm(value) {
      this.currencyAddress = value.currency_network + '：' + value.text
      this.form.wall_id = value.id
      this.showPicker = false
    },
    // 限制保留八位小数
    handlePrice(val) {
      if (val !== '' && val.substr(0, 1) === '.') {
        val = ''
      }
      val = val.replace(/^0*(0\.|[1-9])/, '$1') //解决 粘贴不生效
      val = val.replace(/[^\d.]/g, '') //清除“数字”和“.”以外的字符
      val = val.replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      val = val.replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d).*$/, '$1$2.$3') //只能输入八个小数
      if (val.indexOf('.') < 0 && val !== '') {
        if (val.substr(0, 1) === '0' && val.length === 2) {
          val = val.substr(1, val.length)
        }
      }
      if (+val > +this.userBalance) {
        val = this.userBalance
      }
      this.form.amount = val
    },
    // 提现币种详情
    async getWithdrawDetail() {
      this.loading = true
      await this.$https.get('/platform/getWithdrawDetail?id=' + this.form.withdraw_id).then(res => {
        if (res != undefined && res.code == 1) {
          this.currencyDetail = res.data
          this.currency = res.data.currency
          this.currencyBalance()
          this.$https.get('/wallet/allWalletAddress?currency=' + this.currencyDetail.currency).then(res => {
            if (res != undefined && res.code == 1) {
              this.addressList = res.data.map(item => {
                return {
                  id: item.id,
                  text: item.currency=='Bank'?item.bank_number:item.currency_address,
                  currency_network: item.currency_network
                }
              })
            }
          })
        }
      })
      this.loading = false
    },
    // 币种余额
    currencyBalance() {
      if (this.currency == '' || this.currency == undefined) return
      return this.$https.get('/wallet/currencyBalance?type=0&currency=' + this.currency).then(res => {
        if (res != undefined && res.code == 1) {
          this.userBalance = res.data
        }
      })
    },
    async submit() {
      if (this.form.wall_id === '') {
        this.$toast(this.$t('WithdrawCurrency.Please select the withdrawal address'))
        return
      }
      if (this.form.amount === '') {
        this.$toast(this.$t('WithdrawCurrency.Please enter the withdrawal amount'))
        return
      }
      if (+this.form.amount < +this.currencyDetail.commission_min || +this.form.amount > +this.currencyDetail.commission_max) {
        this.$toast(this.$t('WithdrawCurrency.Minimum withdrawal amount') + this.currencyDetail.commission_min + ', ' + this.$t('WithdrawCurrency.Maximum withdrawal amount') + this.currencyDetail.commission_max)
        return
      }
      if (+this.form.amount > +this.userBalance) {
        this.$toast(this.$t('WithdrawCurrency.Not enough currency available'))
        return
      }
      if (+this.currencyReceipt <= 0) {
        this.$toast(this.$t('WithdrawCurrency.The estimated arrival quantity cannot be 0'))
        return
      }
      if (this.form.password === '') {
        this.$toast(this.$t('WithdrawCurrency.Please enter the security password'))
        return
      }
      this.loading = true
      await this.$https.post('/wallet/submitWithdraw', this.form).then(res => {
        if (res != undefined && res.code == 1) {
          this.$router.push({ path: '/asset' })
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
